<template>
	<swiper class="siwper" :indicator-dots="true" indicator-color="#ccc" :indicator-active-color="Pinia.color"
		:autoplay="true" circular :interval="5000" :duration="2000" v-if="pageData">
		<swiper-item v-for="(item,index) in pageData.list" :key="index" @click="PageUrl(item)">
			<image :src="imgUrls(item.img)" mode="aspectFill" class="imgs"></image>
		</swiper-item>

	</swiper>
</template>

<script setup>
	import { defineProps, ref, onBeforeMount, inject } from 'vue';
	import { usePiniaStore } from '@/store/pinia.js';

	const Pinia = usePiniaStore();
	const props = defineProps(['pageData']);
	const { PageUrl } = inject('common');
	const { imgUrls } = inject('Utils');
</script>

<style lang="scss" scoped>
	.siwper {
		width: 690rpx;
		margin: 10rpx auto 0 auto;
		height: 345rpx;
		box-sizing: border-box;
		border-radius: 12rpx;
		overflow: hidden;
		transform: translateY(0);
		border-radius: 10rpx;

		swiper-item {
			width: 100%;
			height: 100%;
			box-sizing: border-box;
		}
	}

	.imgs {
		width: 100%;
		height: 100%;
	}
</style>